<template>
	<view>
		<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="item" :class="index==tabCurr?'cur black text-bold':'grey'" v-for="(item,index) in items" :key="index" @tap="tabSelect" :data-id="index">
				<view class="lay-c-c-col">
					<view>
						{{items[index]}}	
					</view>
					<view class="cur-flag">&nbsp;&nbsp;</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"MyTab",
		data() {
			return {
				tabCurr: this.curr,
				scrollLeft: 0,
			};
		},
		props: {
			items: {
				type: Array,
				required: true,
				default: ["default"]
			},
			curr: {
				type: Number,
				required: false,
				default: 0
			},
			onChange: {
				type: Function,
				required: true,
				default: ()=>{}
			}
		},
		watch: {
			curr(newVal, oldVal) {
				// console.log("curr change", newVal);
				this.tabCurr = newVal;
			}
		},
		methods: {
			tabSelect(e) {
				let last = this.tabCurr;
				this.tabCurr = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if(this.onChange)
					this.onChange(this.tabCurr, last);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/leui.scss";
	/* scroll-view {
		background-color: white;
	} */
</style>
